<template>
    <div class="tab2">
        <a-space direction="vertical">
            <a-radio-group v-model:value="align">
                <a-radio value="start">start</a-radio>
                <a-radio value="center">center</a-radio>
                <a-radio value="end">end</a-radio>
                <a-radio value="baseline">baseline</a-radio>
            </a-radio-group>

            <a-radio-group v-model:value="direction">
                <a-radio value="horizontal">horizontal</a-radio>
                <a-radio value="vertical">vertical</a-radio>
            </a-radio-group>

            <a-select show-search style="width: 200px;" :options="selectOptions" v-model:value="direction">

            </a-select>
        </a-space>

        <a-space :size="10" :direction :align>
            <a-card title="Card" style="width: 400px">
                <p>Card content</p>
                <p>Card content</p>
            </a-card>

            <a-card>
                card1
            </a-card>

            <a-card>
                card1
            </a-card>

            <a-card>
                card1
            </a-card>

            <a-card>
                card1
            </a-card>
        </a-space>
    </div>
</template>

<script setup lang="ts">
import type { SelectProps } from 'ant-design-vue';

const align = ref('start')
const direction = ref('horizontal')
const selectOptions = ref<SelectProps['options']>([
    { value: 'horizontal', label: 'horizontal' },
    { value: 'vertical', label: 'vertical' },
])
</script>

<style lang="scss" scoped>
.tab2 {
    display: flex;
    flex-direction: column;
}
</style>